<script lang="ts" setup>
// @ts-ignore
import { defineAsyncComponent, onMounted, PropType, ref, watch } from 'vue';
const props = defineProps({
  showAdd: {
    type: Boolean as PropType<boolean>,
    default: false
  }
});
const emits = defineEmits(['update:showAdd']);
const addDrawerShow = ref(props.showAdd);
watch(
  () => props.showAdd,
  () => {
    addDrawerShow.value = props.showAdd;
  }
);
watch(addDrawerShow, () => {
  emits('update:showAdd', addDrawerShow.value);
});
const DataSourceListPage = defineAsyncComponent(
  () => import('metadatax/DataSourceListPage.vue')
);
</script>

<template>
  <div>
    <Suspense>
      <template #default>
        <div style="padding: 18px" class="xxx">
          <DataSourceListPage  v-model:showAdd="addDrawerShow"/>
        </div>
      </template>
      <template #fallback>
        <p>Loading...</p>
      </template>
    </Suspense>
  </div>
</template>
